<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <el-select
    v-model="innerValue"
    multiple
    filterable
    remote
    reserve-keyword
    :remote-method="handleSearch"
    :loading="loading"
    @focus="handleFocus"
    @change="handleChange"
  >
    <el-option
      v-for="item in options"
      :key="item[valueKey]"
      :label="item[labelKey]"
      :value="item[valueKey]"
      :class="{ 'create-option': item.isNew }"
    />
  </el-select>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, computed } from 'vue'
import { ElMessage } from 'element-plus'

const selectedValues = ref([]);
const options = ref([]);
const loading = ref(false);
const searchQuery = ref('');

//传入参数
const props = defineProps({
  modelValue: { type: Array, default: () => [] },
  searchApi: { type: Function, required: true },
  createApi: { type: Function, required: true },
  labelKey: { type: String, default: 'label' },
  valueKey: { type: String, default: 'value' },
  enableCreate: { type: Boolean, default: true }
})
</script>
